<template>
    <section>
        <div class="box-card mt-20" v-loading="submitReviewStatue">
            <el-row>
                <el-col :span="18">
                    <div class="grid-content title">
                        <h4>{{ tableData.correctiveReportDto.title }}</h4>
                        <p>
                            <!--  <span>整改状态 :</span> {{ dict.corrected_progress_status[tableData.correctiveReportDto.status] }} &nbsp;-->
                        </p>
                    </div>
                </el-col>
                <el-col :span="6"  align="right">
                    <el-button @click="_goBack"> 返 回 </el-button>
                </el-col>
            </el-row>
            <el-row>
                <div v-if="tableData.correctiveReportDto.status == 5">
                    <span style="color:#555">本次整改已全部完成，整改明细请返回前一页下载word版整改报告，下期将支持系统内查看整改详情</span>
                </div>
                <div v-else>
                    <el-col :span="24">
                        <div>
                            <span style="font-size: 16px; color: rgb(51, 51, 51);">综合意见</span>
                            <p style=" color: #666;line-height: 28px; margin:0 0 35px;">{{tableData.correctiveReportDto.current_edu_opinion}}</p>
                        </div>
                    </el-col>
                    <el-col :span="24">
                        <el-tabs v-model="activeName" @tab-click="tabHandleClick">
                            <el-tab-pane :label="'整改检查项 ( ' + reformNumber + '项 )'" name="corrected">
                                <el-col :span="24">
                                    <div class="item-colum">
                                        <span class="item-column-title" style="font-size:16px; color:#333">整改总结</span>
                                        <el-input
                                                :autosize="true"
                                                resize="none"
                                                class="showTextConter"
                                                type="textarea"
                                                v-model="tableData.correctiveReportDto.suggestion"
                                                readonly>
                                        </el-input>
                                    </div>
                                    <ul class="corrected-item">
                                        <li v-for="(item, index) in tableData.correctiveItems" :key="index">
                                            <div v-if="item.correctiveItemDto.status === 2" class="list-item">
                                                <p class="check-item-desc">
                                                    {{ item.checkItemDescDTO.check_item_three_order_number + ' ' + item.checkItemDescDTO.check_item_three }}
                                                </p>
                                                <div class="check-item-images item-column" v-if="item.checkItemDescDTO.image_list.length > 0">
                                                    <span class="item-column-title">图片</span>
                                                    <ul class="image-list">
                                                        <li v-for="(imageItem, index) in item.checkItemDescDTO.image_list" :key="index">
                                                            <img :src="basis_url + imageItem.path" alt="" />
                                                        </li>
                                                    </ul>
                                                </div>
                                                <div class="check-item-building-room item-column" v-if="item.checkItemDescDTO.building_room.length > 0">
                                                    <span class="item-column-title">涉及房间</span>
                                                    <div>
                                                        <el-tag
                                                                v-for="(tagRoom, index) in item.checkItemDescDTO.building_room"
                                                                :key="index"
                                                                type="success"
                                                                style="margin-right:15px;"
                                                        >
                                                            {{tagRoom.building}}
                                                        </el-tag>
                                                    </div>
                                                </div>
                                                <div class="check-item-building-info item-column" v-if="item.checkItemDescDTO.desc.length > 0">
                                                    <span class="item-column-title">描述信息</span>

                                                    <el-input
                                                            :autosize="true"
                                                            type="textarea"
                                                            resize="none"
                                                            class="showTextConter"
                                                            v-model="item.checkItemDescDTO.desc"
                                                            readonly>
                                                    </el-input>

                                                </div>
                                                <div class="check-item-corrected item-column top-border">
                                                    <span style="font-size: 16px;color: #333; padding-bottom:10px; font-weight:normal" class="item-column-title">整改信息</span>
                                                </div>
                                                <el-row :gutter="40" v-for="(checkItemInfo, checkItemindex) in item.correctiveItemDto.check_item_info" :key="checkItemindex">
                                                    <div class="items-column-row">
                                                        <el-col :span="24">
                                                            <span class="items-column-row-title">整改内容 {{checkItemindex + 1}}</span>
                                                        </el-col>
                                                        <el-col :span="12">
                                                            <div class="check-item-effect-images items-column-row-column">
                                                                <span class="item-column-title">图片</span>
                                                                <ul class="image-list" v-if="checkItemInfo.images.length > 0">
                                                                    <li v-for="(imageItem, imageIndex) in checkItemInfo.images" :key="imageIndex">
                                                                        <img :src="basis_url + imageItem.path" alt="" @click="handlePictureCardPreview({url:imageItem.path})"/>
                                                                    </li>
                                                                </ul>
                                                                <p v-else style="line-height:16px; margin:0;">
                                                                    暂无
                                                                </p>
                                                            </div>
                                                        </el-col>
                                                        <el-col :span="12">
                                                            <div class="check-item-effect-file items-column-row-column">
                                                                <span class="item-column-title">附件</span>
                                                                <div v-if="checkItemInfo.files && checkItemInfo.files.length > 0">
                                                                    <a v-for="(fileItem, filesIndex) in checkItemInfo.files"
                                                                       href="javascript:;"
                                                                       @click="downloadFile(fileItem.path,fileItem.origin_name)"
                                                                       :key="index"
                                                                    >
                                                                        {{ fileItem.origin_name }}
                                                                    </a>
                                                                </div>
                                                                <p v-else style="line-height:16px; margin:0;">
                                                                    暂无
                                                                </p>
                                                            </div>
                                                        </el-col>
                                                        <el-col :span="12">
                                                            <div class="check-item-cause items-column-row-column">
                                                                <span class="item-column-title">原因分析</span>
                                                                <el-input
                                                                        type="textarea"
                                                                        resize="none"
                                                                        autosize
                                                                        class="showTextConter"
                                                                        placeholder="未填写原因分析"
                                                                        v-model="checkItemInfo.reason"
                                                                        readonly>
                                                                </el-input>
                                                            </div>
                                                        </el-col>
                                                        <el-col :span="12">
                                                            <div class="check-item-effect items-column-row-column">
                                                                <span class="item-column-title">整改措施与结果</span>
                                                                <el-input
                                                                        type="textarea"
                                                                        resize="none"
                                                                        autosize
                                                                        class="showTextConter"
                                                                        placeholder="未填写整改措施与结果"
                                                                        v-model="checkItemInfo.measure"
                                                                        readonly>
                                                                </el-input>
                                                            </div>
                                                        </el-col>
                                                    </div>
                                                </el-row>
                                            </div>
                                        </li>
                                    </ul>
                                </el-col>
                            </el-tab-pane>
                            <el-tab-pane :label=" '未整改检查项 ( ' +  unReformNumber + ' 项  )'" name="unCorrected">
                                <el-col :span="24">
                                    <ul class="corrected-item">
                                        <li v-for="(item, index) in tableData.correctiveItems" :key="index">
                                            <div v-if="item.correctiveItemDto.status === 2" class="list-item">
                                                <p class="check-item-desc">
                                                    {{ item.checkItemDescDTO.check_item_three_order_number + ' ' + item.checkItemDescDTO.check_item_three }}
                                                </p>
                                                <div class="check-item-images item-column" v-if="item.checkItemDescDTO.image_list.length > 0">
                                                    <span class="item-column-title">图片</span>
                                                    <ul class="image-list">
                                                        <li v-for="(imageItem, index) in item.checkItemDescDTO.image_list" :key="index">
                                                            <img :src="basis_url + imageItem.path" alt="" @click="handlePictureCardPreview({url:imageItem.path})" />
                                                        </li>
                                                    </ul>
                                                </div>
                                                <div class="check-item-building-room item-column"  v-if="item.checkItemDescDTO.building_room.length > 0">
                                                    <span class="item-column-title">涉及房间</span>
                                                    <div>
                                                        <el-tag
                                                                v-for="(tagRoom, index) in item.checkItemDescDTO.building_room"
                                                                :key="index"
                                                                type="success"
                                                                style="margin-right:15px;"
                                                        >
                                                            {{tagRoom.building}}
                                                        </el-tag>
                                                    </div>
                                                </div>
                                                <div class="check-item-building-info item-column" v-if="item.checkItemDescDTO.desc.length > 0">
                                                    <span class="item-column-title">问题描述</span>
                                                    <p>
                                                        <el-input
                                                                :autosize="true"
                                                                type="textarea"
                                                                resize="none"
                                                                class="showTextConter"
                                                                v-model="item.checkItemDescDTO.desc"
                                                                readonly>
                                                        </el-input>
                                                    </p>
                                                </div>
                                                <div class="check-item-corrected item-column top-border">
                                                    <span class="item-column-title">未整改原因及未来整改计划</span>
                                                    <el-input
                                                            v-if="item.correctiveItemDto.no_reason && item.correctiveItemDto.no_reason != ''"
                                                            :autosize="true"
                                                            type="textarea"
                                                            resize="none"
                                                            class="showTextConter"
                                                            v-model="item.correctiveItemDto.no_reason"
                                                            readonly>
                                                    </el-input>
                                                    <p v-else style="line-height:16px; margin:0;">
                                                        暂无
                                                    </p>
                                                </div>
                                                <div class="check-item-effect-file item-column">
                                                    <span class="item-column-title">附件</span>
                                                    <div v-if="item.correctiveItemDto.no_reason_files && item.correctiveItemDto.no_reason_files.length > 0">
                                                        <a v-for="(fileItem, index) in item.correctiveItemDto.no_reason_files"
                                                           href="javascript:;"
                                                           @click="downloadFile(fileItem.path,fileItem.origin_name)"
                                                           :key="index">
                                                           {{ fileItem.origin_name }}
                                                        </a>
                                                    </div>
                                                    <p v-else style="line-height:16px; margin:0;">
                                                        暂无
                                                    </p>
                                                    <br>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </el-col>
                            </el-tab-pane>
                        </el-tabs>
                    </el-col>
                </div>
            </el-row>
        </div>
        <el-dialog :visible.sync="dialogShowImages">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
    </section>
</template>

<script>
    import { getCorrectedProgressData, submitReview } from '../../api/corrected_api'
    import { saveAs } from '../../common/js/commons';
    import dict from '../../common/js/dict';

    export default {
        data() {
            return {
                //表格数据
                tableData: {
                    correctiveReportDto: {
                        title: ''
                    }
                },
                dict: dict,
                reviewDesc:'',
                activeName:'corrected',
                reformNumber:0,
                unReformNumber:0,
                corrective_report_id: this.$route.params.id,
                basis_url: '',
                dialogImageUrl: '',
                dialogShowImages:false,
                listLoading:true,
                submitReviewStatue:false

            }
        },
        created() {
            this.getTableData()
        },
        methods: {
            getTableData() {
                getCorrectedProgressData({corrective_report_id:this.$route.params.id}).then(res => {
                    if (res.data.status == 200) {
                        let temp_data = JSON.parse(res.data.datas);
                        temp_data.correctiveItems.map((item, index) => {
                            if(item.correctiveItemDto.status == 1) this.reformNumber ++
                            if(item.correctiveItemDto.status == 2) this.unReformNumber ++
                        })
                        this.tableData = temp_data;
                        this.listLoading = false;
                    } else {
                        if (res.data.status == 401) {
                            this.$router.push('/login');
                        }
                        this.$message.error(res.data.msg);
                    }
                })
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogShowImages = true;
            },
            handleClose() {
                this.reviewSuggest = '';
                this.submitReview = false;
            },
            downloadFile(url, name){
                saveAs(url, name)
            },
            _goBack() {
                this.$router.push('/univ_corrected/list')
            },
            tabHandleClick(tab, event) {
            },
        }
    }
</script>

<style scoped lang="scss" >
    .mt-20{
        margin-top: 20px;
    }
    .check-item-effect-file{
        height:166px
    }
    .box-card{
        padding: 20px 40px;
        .grid-content{
            &.title{
                h4{
                    font-size:24px;
                    color:#101010;
                    margin:0;
                }
                p{
                    display:inline-block;
                    width:200px;
                    color:#333;
                    span{
                        color:#888;
                    }
                }
            }
        }
        .corrected-title{
            font-size:18px;
            color:#101010;
            padding:35px 0 10px;
            line-height:18px;
        }
        .items-column-row{
            background:#f7f7f7;
            overflow:hidden;
            margin:0 20px 20px;
            padding: 20px 40px;
            .items-column-row-title{
                line-height: 20px;
                display: block;
                font-size:16px;
                padding: 20px 0 10px;
                font-weight: bold;
                color: #333;
            }
            .items-column-row-column{
                margin: 10px 0 20px;
            }
        }
        .corrected-item{
            list-style:none;
            padding-left:0;
            li{
                .check-item-desc{
                    font-size:16px;
                    color:#333;
                    line-height: 28px;
                    margin-bottom:0;
                }
                div{
                    &.item-column{
                        padding:30px 0 0;
                    }
                    &.list-item{
                        border:1px solid #e6e6e6;
                        padding:10px 40px;
                        margin-bottom:20px;
                        .check-item-images{
                            display:table;
                        }
                    }
                    &.top-border{
                        border-top:1px solid #e6e6e6;
                        margin-top:20px;
                    }
                    .image-list{
                        width:100%;
                        height:100px;
                        padding: 0;
                        li{
                            width:100px;
                            height:100px;
                            float:left;
                            list-style:none;
                            padding:0;
                            border:1px solid #efefef;
                            margin-right:15px;
                            overflow:hidden;
                            border-radius:8px;
                            img{
                                width:100%;
                                height:100%;
                            }
                        }
                    }
                    p{
                        font-size:14px;
                        color:rgba(102, 102, 102, 1);
                        line-height:24px;
                    }
                    span{
                        &.item-column-title{
                            font-size:14px;
                            font-weight:bold;
                            color:#333;
                            display:block;
                            margin-bottom:10px;
                            line-height:26px;
                        }
                    }
                }
            }
        }
    }
</style>
